<template>
		<div>
			<label>{{lable}}</label>
			<el-select
				v-model="value"
				filterable
				remote
				reserve-keyword
				clearable
				default-first-option
				placeholder="名称/条码/拼音"
				:remote-method="remoteQueryGoodsMethod"
				:loading="loading"
				style="width: 380px"
				@change="goodsSelectChange"
			  >
				<el-option
				  v-for="item in options"
				  :key="item.id"
				  :label="item.goodsName"
				  :value="item.id"
				>
				<span style="float: left">【{{item.text.goodsType}}】{{ item.goodsName }}</span>
					  <span
						style="
						  float: right;
						  color: var(--el-text-color-secondary);
						  font-size: 13px;
						"
					  >
						{{ item.goodsCode }}
					  </span>
				</el-option>
			  </el-select>
		</div>
</template>

<script setup name="goodsSelect">
import { queryGoodsInfo } from "@/api/crm/goodsInfo";
const { proxy } = getCurrentInstance();


const props = defineProps({
    lable:{
        title: String,
        default: '请输入商品信息选择商品：'
    },
 }) 

const value = ref("")
const options = ref([])

const emit = defineEmits() 

function remoteQueryGoodsMethod(queryKey){
	if(queryKey==''){
		return;
	}
	queryGoodsInfo(queryKey).then(rsp=>{
		options.value = rsp.rows
	})
}

function goodsSelectChange(selectValue){
	for (var i = 0; i < options.value.length; i++) {
		var item =  options.value[i]
		if(selectValue==item.id){
			console.log('选中的产品是',item)
			emit('selectChange',item) 
			options.value = [];
			value.value = null;
		}
	}
	options.value = [];
	value.value = null;
}

</script>

<style>
</style>